<template>
  <div class="order-management-container">
    <!-- 顶部标题和搜索框 -->
    <div class="header-section">
      <div class="title-section">
        <h2 class="page-title">
          <i class="el-icon-s-order"></i>
          订单管理系统
        </h2>
        <div class="search-box">
          <el-input
            placeholder="请输入订单ID搜索"
            v-model="searchKey"
            class="search-input"
            clearable
            @clear="getList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getList"
              class="search-btn"
            ></el-button>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 订单表格 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        class="order-table"
        v-loading="loading"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          label="序号"
          width="80"
          type="index"
          align="center"
        >
          <template slot-scope="scope">
            <span class="index-number">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="orderId"
          label="订单ID"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span class="order-id">{{ scope.row.orderId }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="orderTime"
          label="创建时间"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span class="order-time">{{ scope.row.orderTime }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="price"
          label="总金额"
          align="center"
        >
          <template slot-scope="scope">
            <span class="order-price">¥{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="userName"
          label="用户名"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag type="info">{{ scope.row.userName }}</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column
          label="订单状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              :type="getStatusTagType(scope.row.status)"
              effect="dark"
            >
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column
          label="操作"
          align="center"
          width="220"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status=='1' || scope.row.status=='3'"
              @click.native.prevent="changeOrderStatus(scope)"
              type="primary"
              size="small"
              plain
              icon="el-icon-edit"
              class="action-btn"
            >
              更改状态
            </el-button>
            <!-- <el-button
              @click.native.prevent="showOrderDetail(scope.row)"
              type="info"
              size="small"
              plain
              icon="el-icon-view"
              class="action-btn"
            >
              详情
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 更改订单状态对话框 -->
    <el-dialog
      :title="`更改订单状态 - 订单ID: ${currentOrderId}`"
      :visible.sync="centerDialogVisible"
      width="40%"
      center
      class="status-dialog"
    >
      <div class="dialog-content">
        <el-select 
          v-model="orderStatus" 
          placeholder="请选择新状态"
          class="status-select"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false" class="dialog-btn">取 消</el-button>
        <el-button 
          type="primary" 
          @click="sureAnswer" 
          class="dialog-btn"
          :loading="confirmLoading"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <!-- 订单详情对话框 -->
    <el-dialog
      :title="`订单详情 - 订单ID: ${detailData.orderId || ''}`"
      :visible.sync="detailDialogVisible"
      width="60%"
      class="detail-dialog"
    >
      <div class="detail-content" v-if="detailData.orderId">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单ID">{{ detailData.orderId }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ detailData.orderTime }}</el-descriptions-item>
          <el-descriptions-item label="总金额">¥{{ detailData.price }}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{ detailData.userName }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getStatusTagType(detailData.status)" effect="dark">
              {{ getStatusText(detailData.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="收货地址" v-if="detailData.address">{{ detailData.address }}</el-descriptions-item>
          <el-descriptions-item label="联系电话" v-if="detailData.phone">{{ detailData.phone }}</el-descriptions-item>
          <el-descriptions-item label="备注信息" v-if="detailData.remark">{{ detailData.remark }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="order-items" v-if="detailData.items && detailData.items.length">
          <h3 class="items-title">订单商品</h3>
          <el-table
            :data="detailData.items"
            border
            style="width: 100%"
            class="items-table"
          >
            <el-table-column
              prop="productName"
              label="商品名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="quantity"
              label="数量"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="price"
              label="单价"
              width="120"
            >
              <template slot-scope="scope">
                ¥{{ scope.row.price }}
              </template>
            </el-table-column>
            <el-table-column
              prop="totalPrice"
              label="小计"
              width="120"
            >
              <template slot-scope="scope">
                ¥{{ scope.row.totalPrice }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      centerDialogVisible: false,
      detailDialogVisible: false,
      row: '',
      orderStatus: '',
      options: [],
      searchKey: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      confirmLoading: false,
      currentOrderId: '',
      detailData: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        '1': '未发货',
        '2': '已发货',
        '3': '申请退款',
        '4': '订单关闭',
        '5': '交易完成'
      }
      return statusMap[status] || '未知状态'
    },
    
    getStatusTagType(status) {
      const typeMap = {
        '1': 'warning',
        '2': '',
        '3': 'danger',
        '4': 'info',
        '5': 'success'
      }
      return typeMap[status] || ''
    },
    
    changeOrderStatus(row) {
      this.row = row.row
      this.currentOrderId = this.row.orderId
      if (this.row.status == '1') {
        this.options = [
          { value: '2', label: '已发货' }
        ]
      }
      if (this.row.status == '3') {
        this.options = [
          { value: '4', label: '订单关闭' }
        ]
      }
      this.centerDialogVisible = true
    },
    
    sureAnswer() {
      if (this.orderStatus === '') {
        this.$message.error('请选择新状态')
        return
      }
      
      this.confirmLoading = true
      this.$axios.post('/api/user/order/changeStatus', {
        order_id: this.row.orderId,
        status: this.orderStatus
      })
        .then(res => {
          if (res.data.code == '001') {
            this.$message.success(res.data.msg)
            this.centerDialogVisible = false
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(() => {
          this.$message.error('操作失败，请稍后重试')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    
    // 获取订单列表
    getList() {
      this.loading = true
      this.$axios.post('/api/user/order/getOrderList', {
        searchKey: this.searchKey,
        page: this.currentPage,
        size: this.pageSize
      })
        .then(res => {
          this.tableData = res.data.data || []
          this.total = res.data.total || 0
        })
        .catch(() => {
          this.$message.error('获取订单列表失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    
    // 显示订单详情
    showOrderDetail(row) {
      this.detailData = {}
      this.currentOrderId = row.orderId
      this.detailDialogVisible = true
      
      // 这里可以调用API获取订单详情
      // 模拟数据
      this.detailData = {
        ...row,
        address: '北京市朝阳区建国路88号',
        phone: '13800138000',
        remark: '请尽快发货',
        items: [
          { productName: '商品A', quantity: 2, price: 100, totalPrice: 200 },
          { productName: '商品B', quantity: 1, price: 150, totalPrice: 150 }
        ]
      }
    },
    
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.order-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.header-section {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 15px 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  
  .title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .page-title {
      margin: 0;
      font-size: 18px;
      color: #333;
      display: flex;
      align-items: center;
      
      i {
        margin-right: 10px;
        font-size: 20px;
        color: #409EFF;
      }
    }
    
    .search-box {
      width: 300px;
      
      .search-input {
        border-radius: 4px;
        
        ::v-deep .el-input__inner {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
      
      .search-btn {
        background-color: #409EFF;
        color: white;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        
        &:hover {
          background-color: #66b1ff;
        }
      }
    }
  }
}

.table-container {
  background-color: #fff;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  margin-bottom: 20px;
  
  .order-table {
    border-radius: 4px;
    overflow: hidden;
    
    ::v-deep th {
      background-color: #f8f8f9 !important;
      font-weight: 600;
      color: #515a6e;
    }
    
    .index-number {
      color: #909399;
    }
    
    .order-id {
      color: #409EFF;
      font-weight: 500;
    }
    
    .order-time {
      color: #666;
    }
    
    .order-price {
      color: #f56c6c;
      font-weight: 500;
    }
    
    .action-btn {
      padding: 7px 10px;
      margin: 0 5px;
    }
  }
}

.pagination-container {
  text-align: right;
  padding: 10px 0;
}

.status-dialog {
  .dialog-content {
    padding: 20px 0;
    text-align: center;
    
    .status-select {
      width: 80%;
    }
  }
  
  .dialog-footer {
    .dialog-btn {
      padding: 10px 20px;
    }
  }
}

.detail-dialog {
  .detail-content {
    padding: 10px;
    
    ::v-deep .el-descriptions__body {
      background-color: #fafafa;
    }
    
    .order-items {
      margin-top: 20px;
      
      .items-title {
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
        padding-left: 10px;
        border-left: 4px solid #409EFF;
      }
      
      .items-table {
        margin-top: 10px;
      }
    }
  }
}
</style>